<!doctype html>
<html>
<head>
	<title>mofachi-注册</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="Keywords" content="">
	<meta name="Description" content="">
<link type="text/css" href="css/jquery/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/locationSelector.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript">
var step = 1;
$.ajaxSetup({
	type: "POST",
	dataType: "json",
	error: function( jqXHR, textStatus, err ) {
		alert( "error for ajax: " + jqXHR.responseText );
	},
	timeout: 1000,
	statusCode: {
		404: function() {
			alert( "Page Not Found" );
		}
	}
});
function init() {
	$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
	$("#br").datepicker({
		inline: false,
		changeMonth: true,
		changeYear: true,
		yearRange: "-10:+10",
		showWeek: false,
		showMonthAfterYear: true
	});
}
function setDisable( id, isdis ) {
	isdis = ( isdis ) ? "disabled" : "";
	var inputs = $( "#" + id + " input" );
	var len = inputs.length;
	for( var i = 0; i < len; i++ ) {
		inputs[ i ].disabled = isdis;
	}
	var selects = $( "#" + id + " select" );
	len = selects.length;
	for( var i = 0; i < len; i++ ) {
		selects[ i ].disabled = isdis;
	}
}
function initPos() {
	var bw = document.body.clientWidth;
	if( bw < 640 ) return;
	var ow = $("#sp1dv").outerWidth();
	$("#sp1dv").offset( {top:100, left:(bw-ow)/2 } );
	$("#sp2dv").offset( {top:100, left:(bw-ow/2) } );
	$("#sp3dv").offset( {top:100, left:(3*bw-ow)/2} );
}
function resetPos() {
	switch( step ) {
	case 1:
		initPos();
		break;
	case 2:
		var bw = document.body.clientWidth;
		if( bw < 640 ) return;
		var ow = $("#sp1dv").outerWidth();
		$("#sp1dv").offset( {top:100, left:-ow/2 } );
		$("#sp2dv").offset( {top:100, left:(bw-ow)/2 } );
		$("#sp3dv").offset( {top:100, left:bw-ow/2 } );
		break;
	case 3:
		var bw = document.body.clientWidth;
		if( bw < 640 ) return;
		var ow = $("#sp1dv").outerWidth();
		$("#sp1dv").offset( {top:100, left:-bw/2 } );
		$("#sp2dv").offset( {top:100, left:-ow/2 } );
		$("#sp3dv").offset( {top:100, left:(bw-ow)/2 } );
		break;
	}
}
$(document).ready(function() {
	init();
	initPos();
	$( "#eml" ).focus();
	setDisable( "sp2dv", true );
	setDisable( "sp3dv", true );
	$( "#sp2dv" ).css( "opacity", "0.25" );
	$( "#sp3dv" ).css( "opacity", "0.25" );
	$( window ).resize(function(event){
		resetPos();
	});
	$( "#gostep2" ).click(function(event){
		if( !validateStep1() ) {
			return;
		}
		$( "#sp1dv .err" ).hide();
		var inputData = $( "#sp1fm").serialize();
		$.ajax({
			url: "ajax/adduser.php",
			data: inputData,
			success: function(data) {
				switch( data.reply ) {
					case -1: alert( "请提供常用Email和密码" ); break;
					case 0: $( "#cp_eml .err" ).eq( 2 ).show(); break;
					default:
						$( "#cp_eml .err" ).eq( 2 ).hide();
						$( "#sp2uid" ).val( data.reply );
						$( "#sp3uid" ).val( data.reply );
						gotoStep2();
				}
			}
		});
	});
	$( "#gostep3" ).click(function(event){
		if( !validateStep2() ) {
			return;
		}
		$( "#sp2dv .err" ).hide();
		var inputData = $( "#sp2fm").serialize();
		$.ajax({
			url: "ajax/adduserinfo.php",
			data: inputData,
			success: function(data) {
				switch( data.reply ) {
					case -1: alert( "请提供希望使用的昵称" ); break;
					case 0: $( "#cp_nn .err" ).eq( 2 ).show(); break;
					default:
						$( "#cp_nn .err" ).eq( 2 ).hide();
						gotoStep3();
				}
			}
		});
	});
	$( "#finishReg" ).click(function(event){
		if( !validateStep3() ) {
			return;
		}
		$( "#sp3dv .err" ).hide();
		var inputData = $( "#sp3fm").serialize();
		$.ajax({
			url: "ajax/addbabyinfo.php",
			data: inputData,
			success: function(data) {
				switch( data.reply ) {
					case -1: alert( "请提供希望使用的昵称" ); break;
					case 0: $( "#sp3dv .err" ).eq( 2 ).show(); break;
					default:
						$( "#sp3dv .err" ).eq( 2 ).hide();
						goLoginPage();
				}
			}
		});
	});
});
function validateStep1() {
	var result = true;
	$( "#sp1dv .err" ).hide();
	var eml = $( "#eml" ).val().trim();
	var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	if( !eml ) {
		$( "#cp_eml .err" ).eq( 0 ).show();
		result = false;
	} else if( !reg.test( eml ) ) {
		$( "#cp_eml .err" ).eq( 1 ).show();
		result = false;
	}
	var pwd = $( "#pwd" ).val();
	if( !pwd ) {
		$( "#cp_pwd .err" ).eq( 0 ).show();
		result = false;
	}
	if( pwd.length < 6 ) {
		$( "#cp_pwd .err" ).eq( 1 ).show();
		result = false;
	}
	var cfm = $( "#cfm" ).val();
	if( !cfm ) {
		$( "#cp_cfm .err" ).eq( 0 ).show();
		result = false;
	}
	if( cfm != pwd ) {
		$( "#cp_cfm .err" ).eq( 1 ).show();
		result = false;
	}
	return result;
}
function gotoStep2() {
	var bw = document.body.clientWidth / 2;
	bw = ( bw < 320 ) ? 320 : bw;
	bw = '-=' + bw.toString();
	$("#sp1dv").animate( {left:bw,opacity:0.25},500 );
	$("#sp2dv").animate( {left:bw,opacity:1},500 );
	$("#sp3dv").animate( {left:bw},500 );
	setDisable( "sp1dv", true );
	setDisable( "sp2dv", false );
	step = 2;
	$( "#nn" ).focus();
}
function validateStep2() {
	var result = true;
	$( "#sp2dv .err" ).hide();
	var nn = $( "#nn" ).val().trim();
	if( !nn ) {
		$( "#cp_nn .err" ).eq( 0 ).show();
		result = false;
	} else if( nn.length < 4 || nn.length > 20 ) {
		$( "#cp_nn .err" ).eq( 1 ).show();
		result = false;
	}
	var gd = $( "#sp2fm input:checked" ).val();
	if( gd != 1 && gd != 0 ) {
		$( "#cp_gd .err" ).eq( 0 ).show();
		result = false;
	}
	var upv = $( "#selProvince" ).val();
	var urg = $( "#selRegion" ).val();
	var ucy = $( "#selCity" ).val();
	var cityop = $( "#selCity" ).children().length;
	if( ( cityop > 1 && ucy == 0 ) || ( cityop == 1 && urg == 0 ) ) {
		$( "#cp_lc .err" ).eq( 0 ).show();
		result = false;
	}
	return result;
}
function gotoStep3() {
	var bw = document.body.clientWidth / 2;
	bw = ( bw < 320 ) ? 320 : bw;
	bw = '-=' + bw.toString();
	$("#sp1dv").animate( {left:bw},500 );
	$("#sp2dv").animate( {left:bw,opacity:0.25},500 );
	$("#sp3dv").animate( {left:bw,opacity:1},500 );
	setDisable( "sp2dv", true );
	setDisable( "sp3dv", false );
	step = 3;
	$( "#sp3fm input" ).eq(1).focus();
}
function validateStep3() {
	var result = true;
	$( "#sp3dv .err" ).hide();
	var nn = $( "#sp3fm input" ).eq(1).val().trim();
	if( !nn ) {
		$( "#sp3fm .err" ).eq( 0 ).show();
		result = false;
	} else if( nn.length < 4 || nn.length > 20 ) {
		$( "#sp3fm .err" ).eq( 1 ).show();
		result = false;
	}
	var gd = $( "#sp3fm input:checked" ).val();
	if( gd != 1 && gd != 0 ) {
		$( "#sp3fm .err" ).eq( 4 ).show();
		result = false;
	}
	var br = $( "#sp3fm input" ).eq(5).val();
	if( !br ) {
		$( "#sp3fm .err" ).eq( 5 ).show();
		result = false;
	}
	return result;
}
function goLoginPage() {
	//alert( "inserted successfully!" );
	$( "#login>input" ).eq(0).val( $( "#eml" ).val() );
	$( "#login>input" ).eq(1).val( $( "#pwd" ).val() );
	$( "#login" ).submit();
}
</script>
<link href="css/login.css" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">

</style>
</head>
<body>
<div id="header">mofachi</div>
<div id="sp1dv" class="sp">
<form id="sp1fm">
<table class="sptb">
	<tr>
		<td class="sphd">登录信息</td>
	</tr>
	<tr>
		<td class="cp" id="cp_eml">
			<span>常用邮件</span>
			<div class="err">请输入常用的邮件地址</div>
			<div class="err">请确认邮件地址的格式是否正确</div>
			<div class="err">此邮件地址已被使用，请更换其它地址注册</div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="text" id="eml" name="email" size="40"/></td>
	</tr>
	<tr>
		<td class="cp" id="cp_pwd">
			<span>密码</span>
			<div class="err">请输入密码</div>
			<div class="err">密码长度过短，请至少输入6位数字字母组合</div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="password" id="pwd" name="password" size="40"/></td>
	</tr>
	<tr>
		<td class="cp" id="cp_cfm">
			<span>确认密码</span>
			<div class="err">请再次输入密码，以便确认</div>
			<div class="err">前后两次输入的密码不一致，请修改</div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="password" id="cfm" size="40"/></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td class="save"><input id="gostep2" type="button" value="保存&gt;下一步"/></td>
	</tr>
</table>
</form>
</div>
<div id="sp2dv" class="sp">
<form id="sp2fm">
	<input type="hidden" id="sp2uid" name="uid" value=""/>
<table class="sptb">
	<tr>
		<td class="sphd">个人信息</td>
	</tr>
	<tr>
		<td class="cp" id="cp_nn">
			<span>昵称</span>
			<div class="err">请输入希望使用的昵称</div>
			<div class="err">昵称长度应该大于4，小于20</div>
			<div class="err">该昵称已被使用，请重新选择其它昵称</div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="text" id="nn" name="nn" size="40"/></td>
	</tr>
	<tr>
		<td class="cp" id="cp_rn">
			<span>真实姓名</span>
			<div class="err"></div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="text" id="rn" name="rn" size="40"/></td>
	</tr>
	<tr>
		<td class="cp" id="cp_gd">
			<span>性别</span>
			<div class="err">请选择您的性别</div>
		</td>
	</tr>
	<tr>
		<td class="ipt">
			<input type="radio" id="uml" name="gd" value="1">男</input>
			<input type="radio" id="ufm" name="gd" value="0">女</input>
		</td>
	</tr>
	<tr>
		<td class="cp" id="cp_bt">
			<span>生日</span>
			<div class="err"></div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="text" id="br" name="br" size="40"/></td>
	</tr>
	<tr>
		<td class="cp" id="cp_lc">
			<span>所在地区</span>
			<div class="err">请选择所在地区</div>
		</td>
	</tr>
	<tr>
		<td class="ipt" id="userloc">
			<select class="locSel" name="upc" id="selProvince"><option value="0">----</option></select>
			<select class="locSel" name="urc" id="selRegion"><option value="0">----</option></select>
			<select class="locSel" name="ucc" id="selCity"><option value="0">----</option></select>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td class="save"><input id="gostep3" type="button" value="保存&gt;下一步"/></td>
	</tr>
</table>
</form>
</div>
<div id="sp3dv" class="sp">
<form id="sp3fm">
	<input type="hidden" id="sp3uid" name="uid" value=""/>
<table class="sptb">
	<tr>
		<td class="sphd">宝宝信息</td>
	</tr>
	<tr>
		<td class="cp">
			<span>昵称</span>
			<div class="err">请输入希望使用的昵称</div>
			<div class="err">昵称长度应该大于4，小于20</div>
			<div class="err">该昵称已被使用，请重新选择其它昵称</div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="text" name="nn" size="40"/></td>
	</tr>
	<tr>
		<td class="cp">
			<span>真实姓名</span>
			<div class="err"></div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="text" name="rn" size="40"/></td>
	</tr>
	<tr>
		<td class="cp">
			<span>性别</span>
			<div class="err">是男宝宝还是女宝宝？</div>
		</td>
	</tr>
	<tr>
		<td class="ipt">
			<input type="radio" id="bml" name="gd" value="1">男</input>
			<input type="radio" id="bfm" name="gd" value="0">女</input>
		</td>
	</tr>
	<tr>
		<td class="cp">
			<span>生日</span>
			<div class="err">宝宝是什么时候出生的？</div>
		</td>
	</tr>
	<tr>
		<td class="ipt"><input type="text" name="br" size="40"/></td>
	</tr>
	<tr>
		<td class="cp">
			<span>所在地区</span>
			<div class="err"></div>
		</td>
	</tr>
	<tr>
		<td class="ipt">&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td class="save"><input id="finishReg" type="button" value="完成注册"/></td>
	</tr>
</table>
</div>
<form id="login" action="login.php" method="post">
	<input type="hidden" name="eml"/>
	<input type="hidden" name="pwd"/>
</form>
<script>
window.onload = function() {
	initLocationSelector();
}
</script>
</body>
</html>